<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import { TrendObject } from '@/types/interface'
import * as echarts from 'echarts'
import { useWindowSize } from '@/utils/useWindowSize'

const chart = ref()

const trendObjects = reactive<TrendObject[]>([
    {
        type:1,
        title:'入库量',
        color: '125,250,141'
    },
    {
        type:2,
        title:'出库量',
        color: '231,100,151'
    },
    {
        type:3,
        title:'库存量',
        color: '89,189,233'
    }
])


const options = {
  color: ['rgb(125,250,141)','rgb(231,100,151)','rgb(89,189,233)'],
  title: {
    show: false,
    text: 'Gradient Stacked Area Chart'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985'
      }
    },
    borderColor:'rgb(26,38,84)',
    borderRadius: 6,
    borderWidth: 1.5,
    textStyle: {
      color: 'white',
      fontSize: 10
    },
    backgroundColor: 'rgba(11,15,35,.7)',
    formatter: function (params : any) {
        let elements = params.map((item : any)=>{
          return '<div><span style="display: inline-block; margin-right: 5px; width: 5px; height: 5px; background-color: ' + item.color + '; border-radius: 50%;"></span>' + item.seriesName + ': ' + item.value + '</div>';
        })
        let html = "<div class='column-normal-align-start'>" + '<span>' + (params.length ? params[0].name  : '') + '</span>' + elements.join(' ') + '</div>'
        return html
    }
  },
  legend: {
    show: false,
    data: ['入库量', '出库量', '库存量',]
  },
  toolbox: {
    show: false,
    feature: {
      saveAsImage: {}
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true,
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      data: ['2023-01', '2023-02', '2023-03', '2023-04', '2023-05', '2023-06', '2023-07'],
      axisLine: {
          lineStyle: {
              color: 'rgb(126,149,181)' // 这里将网格线颜色设为红色
          },
      },
      axisLabel:{
            rotate:45   //将x轴标签逆时针旋转45度
        }
    }
  ],
  yAxis: [
    {
      type: 'value',
      axisLine: {
          lineStyle: {
              color: 'rgb(126,149,181)' // 这里将网格线颜色设为红色
          }
      },
      splitLine: {
          lineStyle: {
              color: 'rgb(36,40,69)'
          }
      },
    },
  ],
  series: [
    {
      name: '入库量',
      type: 'line',
      stack: 'Total',
      smooth: true,
      lineStyle: {
        width: 1,
        color: 'rgb(125,250,141)'
      },
      showSymbol: false,
      areaStyle: {
        opacity: 0.2,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(125,250,141)'
          },
          {
            offset: 1,
            color: 'rgba(125,250,141,.3)'
          }
        ])
      },
      emphasis: {
        focus: 'series'
      },
      data: [140, 232, 101, 264, 90, 340, 250]
    },
    {
      name: '出库量',
      type: 'line',
      stack: 'Total',
      smooth: true,
      lineStyle: {
        width: 1,
        color: 'rgb(231,100,151)'
      },
      showSymbol: false,
      areaStyle: {
        opacity: 0.2,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(231,100,151)'
          },
          {
            offset: 1,
            color: 'rgba(231,100,151,.3)'
          }
        ])
      },
      emphasis: {
        focus: 'series'
      },
      data: [120, 282, 111, 234, 220, 340, 310]
    },
    {
      name: '库存量',
      type: 'line',
      stack: 'Total',
      smooth: true,
      lineStyle: {
        width: 1,
        color: 'rgb(89,189,233)'
      },
      showSymbol: false,
      areaStyle: {
        opacity: 0.2,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(89,189,233)'
          },
          {
            offset: 1,
            color: 'rgba(89,189,233,.3)'
          }
        ])
      },
      emphasis: {
        focus: 'series'
      },
      data: [320, 132, 201, 334, 190, 130, 220]
    }
  ]
}

let myEchart : any = null
onMounted(() => {
  myEchart = echarts.init(chart.value)
  myEchart.setOption(options)
})


// 大屏适配尺寸工具
const { reSizeEvent } = useWindowSize()
reSizeEvent(()=>{
  myEchart.resize()
})
</script>

<template>
    <div class="full-w">
        <SepTitle title="入库出库走势图">
            <template #main>
                <div class="main p-l-5">
                    <div class="row-normal-end">
                        <span class="m-r-5 row-normal" v-for="(item,index) in trendObjects" :key="index">
                            <span class="font-size-10 left-trend-indicator-color m-r-5 line-height-15">{{ item.title }}</span>
                            <span class="indicator" :style="{'background-color':`rgb(${item.color})`}"></span>
                        </span>
                    </div>
                    <div class="chart" ref="chart"></div>
                </div>
            </template>
        </SepTitle>
    </div>
</template>   

<style lang="stylus" scoped>
@import "stylus-px2rem";
@import url('@/css/normal.styl');
.main 
    padding-bottom 20px;
    height 200px
    padding-left 10px

$indicatorHeight = 3px
.indicator
    width ($indicatorHeight * 4)
    height $indicatorHeight
    border-radius ($indicatorHeight / 2)
    display inline-block 
    background-color red

.chart
    width 100%
    height 220px
    position relative
    top -30px
</style>

